<template>
  <div
    style="
      overflow: hidden;
      width: auto;
      margin: 24px 24px 0;
      background: #fff;
      height: 100vh;
    "
  >
    <p style="margin-top: 20px">
      <span
        style="font-size: 20px; cursor: pointer"
        @click="
          () => {
            $router.go(-1);
          }
        "
      >
        <i style="margin-left: 40px" class="el-icon-arrow-left"> </i
        >返回列表</span
      >
    </p>
    <p class="title">{{ questionInfo.qtype }}题</p>

    <div
      style="
        margin-bottom: 34px;
        margin-left: 79px;
        font-size: 24px;
        font-weight: 400;
        color: #333333;
      "
    >
      <span style="display: inline-block; width: 98%"
        >{{ questionInfo.stem }}
      </span>
      <div
        style="line-height: 150px; display: inline-block"
        v-if="questionInfo.stem_img"
      >
        <!-- <img :src="Current.stem_img" style="100%;width:60%" alt="" /> -->
        <el-image
          style="width: 60%"
          :src="questionInfo.stem_img"
          :preview-src-list="[questionInfo.stem_img]"
        >
        </el-image>
      </div>
    </div>
    <el-radio-group
      class="radio-group-box"
      v-if="questionInfo.qtype == '单选' || questionInfo.qtype == '多选'"
    >
      <div class="radio_box" v-for="(item, index) in obj.tiList" :key="index">
        <el-radio class="arrse" :label="item.cred" v-if="item.content_img"
          >{{ item.cred }}
          <img
            style="max-width: 100px; max-height: 100px"
            :src="item.content_img"
            alt=""
        /></el-radio>
        <el-radio class="arrse" :label="item.cred" v-else-if="item.content"
          >{{ item.cred }} {{ item.content }}</el-radio
        >
      </div>
    </el-radio-group>
    <el-radio-group class="radio-group-box" v-if="questionInfo.qtype == '判断'">
      <div class="radio_box">
        <el-radio label="正确"><span class="fontsizer">正确</span></el-radio>
      </div>
      <div class="radio_box">
        <el-radio label="错误"><span class="fontsizer">错误</span></el-radio>
      </div>
    </el-radio-group>

    <div class="feedbackInfo">
      <div style="margin-bottom: 20px">
        <span style="color: #9394a1">问题类型：</span
        ><span style="color: #292a4c"> {{ obj.category }}</span>
      </div>
      <div style="display: flex; justify-content: flex-start">
        <p style="color: #9394a1">问题描述：</p>
        <div style="width: 1100px; color: #292a4c">{{ obj.reason }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { delquestion, getquestion, setquestion } from "@/utils/auth";
export default {
  data() {
    return {
      obj: {},
      questionInfo: {},
    };
  },
  created() {
    //保留路由参数 防止刷新丢失
    let info = getquestion();
    if (info) {
      this.obj = JSON.parse(info);
      //    = info.data;
      this.questionInfo = this.obj.question_info;
    } else {
      let Arr = [];
      this.obj = this.$route.params.all;
      this.questionInfo = this.$route.params.all.question_info;
      Arr.push(
        {
          cred: "A",
          content: this.questionInfo.a,
          content_img: this.questionInfo.a_img,
        },
        {
          cred: "B",
          content: this.questionInfo.b,
          content_img: this.questionInfo.b_img,
        },
        {
          cred: "C",
          content: this.questionInfo.c,
          content_img: this.questionInfo.c_img,
        },
        {
          cred: "D",
          content: this.questionInfo.d,
          content_img: this.questionInfo.d_img,
        },
        {
          cred: "E",
          content: this.questionInfo.e,
          content_img: this.questionInfo.e_img,
        },
        {
          cred: "F",
          content: this.questionInfo.f,
          content_img: this.questionInfo.f_img,
        }
      );
      this.obj.tiList = Arr;

      setquestion(this.obj);
    }
  },
  beforeDestroy() {
    delquestion();
  },
};
</script>

<style lang="scss" scoped>
.title {
  width: 1700px;
  flex-shrink: 0;
  margin-top: 20px;
  font-size: 20px;
  font-weight: normal;
  color: #333333;
  text-align: center;
}
::v-deep {
  .feedbackInfo {
    padding: 20px 36px;
    width: auto;
    margin-left: 50px;
    height: auto;
    background: #fafafa;
  }
  .radio-group-box {
    margin-left: 59px;
    padding: 0 20px;
  }
  .radio_box {
    font-size: 20px;
    padding-bottom: 16px;

    .arrse {
      width: 65vw;
      word-break: break-all !important;
      white-space: normal !important;
    }
    .el-radio__label,
    .el-checkbox__label {
      font-size: 20px;
      word-break: break-all !important;
      white-space: normal !important;
    }
    .fontsizer {
      font-size: 20px;
    }
    .el-radio__inner {
      width: 20px;
      height: 20px;
      &::after {
        width: 8px;
        height: 8px;
      }
    }
    .el-checkbox__inner {
      width: 20px;
      height: 20px;
      &::after {
        width: 5px;
        height: 9px;
        left: 6px;
      }
    }
    .el-radio__input {
      margin-top: -5px;
    }
  }
}
</style>